<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_固定定位广告条</title>
    <style>
        .top {
            background-color: #5aa4ae;
            height: 120px;
            color: #fff;
            font-size: 30px;
            /* 固定定为*/
            position: fixed;
            top: 0;
            /* 设置宽度为视口宽度的100%（viewport width）*/
            width: 100vw;
            /* 设置文字居中*/
            text-align: center;
            line-height: 120px;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
            /* 文字居中*/
            text-align: center;
            /*line-height: 200px;*/
        }
        .left {
            background-color: #fff799;
            left: 20px;
        }
        .right {
            background-color: #f35336;
            right: 20px;
        }
        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main"></div>
    我是页面主体内容
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, adipisci autem consequuntur cupiditate debitis
    distinctio est illo labore nesciunt officia perferendis, provident, quam rerum sit soluta unde veniam veritatis
    vitae!
</div>
<div>Deleniti dolorem doloribus ea exercitationem laborum magnam maxime natus, placeat veritatis! Beatae enim est
    eveniet id labore, laborum minus nobis sint soluta? Aperiam facere fugit minima officia officiis similique sunt!
</div>
<div>Aliquam animi beatae cumque deleniti dolorum error facere illo molestiae nesciunt, nobis perspiciatis possimus quas
    quasi quisquam ratione reiciendis voluptates. Aliquid deserunt nisi optio praesentium quam quisquam repudiandae
    saepe voluptates.
</div>
<div>Cumque cupiditate eveniet recusandae! Alias distinctio, eius facere illum inventore iste labore porro qui,
    repellendus tempora tenetur ullam voluptas. Ab deleniti dolores ea enim facere iusto natus odit quisquam voluptatem.
</div>
<div>Accusamus alias aspernatur commodi cupiditate dolor ducimus earum eius fugiat illum, inventore, laudantium libero
    nesciunt quia quis, quisquam reiciendis similique veritatis. Amet, cupiditate error eveniet ipsa itaque quos
    reprehenderit similique!
</div>
<div>Accusantium alias assumenda aut cupiditate deleniti deserunt, dolor dolores, eum facere fuga impedit modi odio
    possimus quaerat, quibusdam rerum unde veritatis voluptate. Enim est illum numquam, quae sint totam voluptate.
</div>
<div>A ab accusantium animi architecto beatae, cum, dolores doloribus eius facilis fugiat inventore, itaque libero
    maxime necessitatibus nihil pariatur quo rerum sit tempore velit. Accusantium cumque distinctio expedita. Porro,
    qui?
</div>
<div>Adipisci autem deleniti dolores dolorum exercitationem, facere inventore ipsa, maiores natus nihil saepe sit,
    soluta tempore! Consequuntur cupiditate fuga incidunt iste labore mollitia omnis quae quisquam quod ratione. Minus,
    numquam!
</div>
<div>Amet at blanditiis ducimus enim eos error explicabo inventore iure minus veniam. Aliquid assumenda deserunt
    doloribus enim eveniet expedita fugiat iure libero nisi nostrum, recusandae reiciendis sequi soluta tempora ut!
</div>
<div>Ab, consequatur, culpa dolorem eum eveniet ex harum impedit optio quo ratione reiciendis, sed soluta ullam
    voluptates voluptatibus? Aliquam eligendi eos ex harum incidunt minima nam neque perspiciatis repellendus rerum!
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci amet, at autem consequuntur deserunt
    dignissimos eius eos, excepturi iusto molestiae molestias officiis porro, repellendus sapiente sunt voluptates?
    Nesciunt, vel.
</div>
<div>Atque beatae culpa cupiditate deserunt dignissimos dolorem esse facilis fugiat id magni minima mollitia nam neque
    non odio odit officia perspiciatis, praesentium quam quas quibusdam quod ratione recusandae, soluta voluptatum.
</div>
<div>Beatae culpa dolorum esse est eum hic ipsam laborum nulla quos similique. Animi assumenda commodi delectus
    doloribus illo in ipsum libero, maiores necessitatibus nostrum quas quos rem repudiandae tenetur totam.
</div>
<div>Ad architecto, beatae blanditiis cumque facilis harum inventore iure iusto libero neque obcaecati odio officia
    optio placeat quaerat quod recusandae reiciendis repellat reprehenderit sed soluta tempora, veniam? Dolorem
    explicabo, minus.
</div>
<div>Accusantium ad alias beatae commodi cupiditate delectus deserunt dolor doloribus eligendi explicabo facilis, fugiat
    ipsam laborum laudantium maiores molestiae neque, omnis placeat provident quia quisquam quo ratione ullam unde ut!
</div>
<div>Animi commodi cum, deserunt error eum illo itaque magni placeat rerum, tenetur ut voluptates! Accusantium,
    assumenda deserunt, doloremque et, exercitationem facilis id maxime pariatur possimus quos repellendus reprehenderit
    voluptatibus voluptatum.
</div>
<div>Accusamus amet architecto corporis cupiditate earum eligendi, eos esse exercitationem impedit laboriosam laudantium
    magnam mollitia natus nostrum quae quod saepe temporibus! Aliquid aperiam est iure libero mollitia possimus quisquam
    vel.
</div>
<div>Dignissimos nam neque nesciunt nisi veniam voluptatem. Aliquam aspernatur consequuntur culpa cumque eaque,
    expedita, fuga incidunt labore maxime modi molestiae numquam officiis perspiciatis quis, ratione saepe sequi soluta
    tempora vel?
</div>
<div>Ad, asperiores autem consequatur, debitis doloremque dolorum, est harum incidunt itaque neque numquam possimus
    provident quas repellat repellendus saepe suscipit velit vero. Aliquam, blanditiis dicta dolore eligendi enim quos
    voluptatibus?
</div>
<div>A accusamus architecto asperiores blanditiis deleniti et facilis fuga fugiat harum in labore maiores placeat
    provident quas tempora, vel voluptatibus! Aliquam assumenda culpa inventore laboriosam laudantium praesentium quia
    rerum tenetur.
</div>
<div>Beatae, impedit laudantium? Alias assumenda blanditiis, cum debitis deserunt dicta dolor est exercitationem
    expedita explicabo laudantium molestiae neque non officiis repellendus, sapiente vitae voluptates. Dolorem eligendi
    minus quasi quos suscipit!
</div>
<div>Ad at atque dolorem ex nihil perspiciatis, provident qui sapiente tempora vero. Dignissimos exercitationem
    explicabo minus necessitatibus pariatur quia tempore vitae? Beatae corporis dolor eius, error illo perspiciatis
    porro! Quis?
</div>
<div>Architecto, autem exercitationem facilis ipsa nam qui tempore. Ab blanditiis, delectus dignissimos incidunt iusto
    labore maxime repellat? Aliquam est magnam non sint tempora temporibus veritatis? Minima nam quibusdam sed vero.
</div>
<div>Dolorem ex numquam qui quibusdam quidem? Atque commodi deserunt illum ipsa ipsum iure modi natus totam ullam unde.
    Asperiores atque eaque nihil non nostrum odio odit quisquam rem suscipit ullam!
</div>
<div>Adipisci assumenda doloribus, dolorum fuga maiores quos repellendus tempore veniam? Blanditiis consectetur culpa
    nihil nulla! Error expedita facere impedit laborum laudantium minus numquam placeat, ratione repellendus sit velit
    veniam voluptate!
</div>
<div>Accusamus at aut culpa dolorum eum excepturi hic impedit incidunt laboriosam, laudantium natus nostrum omnis quidem
    quos ratione saepe sint totam. Accusantium beatae consequuntur cupiditate, dolorem enim fugit molestiae nulla.
</div>
<div>Aliquam culpa deleniti deserunt distinctio dolore doloremque, eaque eos fugiat iste laborum, modi quia quo tempore
    unde vel veritatis voluptates voluptatibus. At dicta exercitationem expedita explicabo impedit perferendis quam
    sapiente.
</div>
<div>Accusamus culpa esse et, labore nihil quas unde veritatis. Earum laudantium possimus quae quas recusandae tempore?
    Assumenda debitis et id libero, modi obcaecati, officia perferendis quas repudiandae rerum tempora, tempore?
</div>
<div>Ab aliquam consequuntur dicta, dolor, dolorem doloremque earum enim error eveniet id incidunt ipsam ipsum mollitia
    necessitatibus nihil nobis obcaecati optio quia repudiandae sit soluta sunt tempore unde vel voluptatum.
</div>
<div>Aspernatur assumenda deserunt dolorem eum facilis fugit, harum illo ipsam magni minus praesentium quas quo
    reiciendis rem suscipit? Adipisci aliquid ducimus harum illum in laboriosam nulla saepe tempore tenetur voluptas.
</div>
<div>Alias aspernatur autem cumque delectus eligendi exercitationem expedita, fuga libero mollitia necessitatibus nemo,
    nisi nulla optio porro quaerat quis sapiente sit sunt vel veniam! Deserunt hic ipsum perspiciatis rem rerum!
</div>
<div>Adipisci atque beatae corporis culpa deserunt doloremque excepturi exercitationem incidunt laboriosam, molestias
    nisi nostrum omnis perferendis perspiciatis quos reprehenderit voluptatibus voluptatum! Ab ad, ducimus expedita
    minima odio odit quae repellat.
</div>
<div>Ad debitis deserunt distinctio, eaque et excepturi facere fugit harum, impedit incidunt laboriosam magni maiores
    quaerat reprehenderit repudiandae sed tempora vitae voluptas voluptatibus voluptatum? A dignissimos numquam quas
    quis vero!
</div>
<div>Accusamus accusantium, aliquam aperiam cum dolorum ducimus eveniet expedita fugiat harum hic illum impedit incidunt
    labore magnam necessitatibus neque numquam optio pariatur placeat praesentium qui quis quos recusandae temporibus
    tenetur.
</div>
<div>Commodi cum doloribus ea earum facere magnam minus mollitia neque nesciunt odit placeat provident quidem quos
    recusandae similique veniam vitae, voluptates? Autem doloremque eligendi eum ex fugiat quo temporibus. Molestias?
</div>
<div>Ab accusamus alias asperiores delectus dicta excepturi in, incidunt iure laboriosam laudantium magnam mollitia
    obcaecati officia omnis quos reprehenderit vitae? Adipisci animi dolore, explicabo labore laborum quas sapiente
    tempore voluptates.
</div>
<div>Dolor ipsam quod vero! Deserunt dolor dolores earum itaque perferendis quas quibusdam? Ad aperiam autem
    consequuntur corporis delectus dolore, dolorem eligendi maxime molestiae optio pariatur quod suscipit tempore ut,
    veniam.
</div>
<div>Accusamus ad alias commodi consectetur cumque, dicta ducimus eius nesciunt nobis optio reiciendis totam vero
    voluptatem? Architecto consequuntur maiores natus optio sit! Aut deleniti distinctio dolores, esse minus quaerat
    ratione?
</div>
<div>Adipisci alias, assumenda atque beatae corporis delectus deserunt dolorum ex excepturi exercitationem illo iusto
    libero modi molestiae mollitia quisquam quo quod reiciendis repellat repellendus repudiandae sit, vitae. Eum,
    impedit vero?
</div>
<div>Assumenda eaque esse hic qui repellendus rerum! Ad amet animi aspernatur consequatur cumque debitis doloremque
    eaque earum, enim esse expedita itaque labore omnis quos recusandae sapiente, soluta tenetur veniam vitae!
</div>
<div>Ad aliquam, animi architecto aspernatur atque distinctio eaque expedita inventore perspiciatis, placeat quaerat
    quis ratione. Adipisci aliquam at aut, distinctio dolores et explicabo facilis impedit ipsum ratione recusandae
    reprehenderit veritatis.
</div>
<div>Autem, blanditiis cum in ipsa, magni maiores nostrum officiis quo quod, saepe sequi voluptatem? Distinctio, iusto
    vero. Architecto asperiores aspernatur ea, harum ipsam laboriosam minima optio quasi quos reprehenderit, voluptatum?
</div>
<div>At dolores earum maxime molestiae quas saepe sapiente? Ab accusantium aperiam assumenda atque aut consectetur
    delectus fugit, itaque, labore laboriosam minus mollitia odit quia quibusdam, quo voluptatem voluptatum? Suscipit,
    vero.
</div>
<div>Adipisci aliquam aliquid beatae delectus deleniti doloribus ducimus explicabo impedit ipsum magni maxime natus,
    nobis nostrum quo tenetur velit, vitae. Dicta dolores eaque obcaecati provident quis, rerum vero voluptas
    voluptatibus.
</div>
<div>Alias doloremque odio optio ratione. Adipisci amet consectetur ducimus ea et, exercitationem expedita rem sequi.
    Aperiam, consequatur dicta distinctio doloribus ipsa laborum magni, minima, molestiae nemo obcaecati praesentium
    totam ut!
</div>
<div>Accusantium aspernatur distinctio doloremque eius et eum harum illo illum inventore ipsum labore, libero nostrum
    quae quas quod similique suscipit tempora voluptate? Ab ducimus eveniet fugit harum hic, illum ullam.
</div>
<div>Ad commodi ipsum iste iure maiores quidem sapiente similique. Alias aliquam dicta distinctio, hic iure odio
    reiciendis. Accusamus ea impedit neque reprehenderit velit. Autem ducimus eum fuga obcaecati, quasi sed.
</div>
<div>Commodi, dolore dolorem dolores ducimus eaque et, eum expedita fuga fugiat illo ipsa itaque nam nemo nisi nulla
    possimus quod quos recusandae sit soluta sunt temporibus veritatis vero voluptatem voluptates.
</div>
<div>Amet, delectus dicta inventore nisi possimus reiciendis sunt veritatis. A beatae consectetur, cumque delectus ea
    fugit itaque odio odit pariatur rem sunt suscipit ullam voluptates. Debitis modi necessitatibus non voluptate?
</div>
<div>Cum deserunt dignissimos dolores enim error, ipsam iste laboriosam molestiae officia possimus, quo ratione
    reiciendis veniam! Accusantium esse facilis, illum maiores optio possimus ratione reiciendis sed soluta tempora!
    Dolorem, quas.
</div>
<div>A accusantium aliquam atque commodi, consequuntur dolor dolore facere fuga, id impedit in inventore ipsam itaque
    minus molestias non nostrum obcaecati quaerat quia quisquam quos repellendus sit tempora unde voluptatem!
</div>
<div>Ad alias debitis deserunt doloremque doloribus ducimus, eaque esse exercitationem explicabo impedit ipsam iure
    magnam maiores neque nisi, nostrum omnis quaerat quas quasi quia repellat vel velit vitae voluptatibus voluptatum.
</div>
<div>Alias debitis laudantium porro quas voluptates? Adipisci aperiam assumenda culpa earum expedita id laboriosam, nemo
    non perferendis quod, recusandae saepe ut voluptatibus? Dicta dolore facilis in incidunt laudantium quasi quisquam.
</div>
<div>Accusamus adipisci asperiores aut cum cupiditate dicta dolore doloremque dolores excepturi facilis, itaque iusto
    laboriosam libero minima, nesciunt nihil nisi omnis perspiciatis praesentium quae, quaerat quidem sed sequi ut vel.
</div>
<div>Doloremque esse in ipsa, laborum nostrum pariatur possimus provident quia quod sed, sit vitae voluptates? Adipisci
    consequuntur distinctio, dolores ducimus, eaque exercitationem facilis illo inventore necessitatibus repudiandae
    saepe ullam unde!
</div>
<div>Ab autem consectetur cumque cupiditate debitis doloremque facere impedit in iure mollitia nisi officiis optio
    praesentium quae, quia similique vitae voluptas? Accusamus assumenda delectus dolor dolores esse excepturi officia
    quae.
</div>
<div>A autem dolorum exercitationem incidunt maiores nisi numquam quidem sequi tempora, tempore, temporibus voluptas.
    Assumenda atque consequatur harum incidunt iste nam officiis possimus, quis quod repudiandae rerum similique ullam
    ut.
</div>
<div>Labore neque odio placeat quaerat quo vel? At doloremque et fugiat, id illo illum magni nulla quis quo repellat sed
    tempora veritatis voluptate. Delectus dicta explicabo laborum quam rem tempora.
</div>
<div>Adipisci eveniet magni nesciunt nostrum obcaecati placeat unde! Accusantium ad aperiam architecto ducimus facilis
    id inventore libero, magnam maiores maxime non nulla placeat quae, quasi repellat saepe sit ullam, voluptates!
</div>
<div>Enim error fugit id itaque maxime natus odio sint, voluptatibus. Ab atque autem dignissimos dolorum eligendi error
    necessitatibus quibusdam voluptatem! Aut et fugiat, magni necessitatibus nesciunt obcaecati reprehenderit saepe
    voluptates?
</div>
</body>
</html>